<template>
  <div class="layout">
    <!-- 顶部 Header，全屏宽 -->
    <Header />

    <!-- 主体内容居中固定宽度 -->
    <div class="main-wrapper">
      <div class="main-content">
        <!-- 左侧文章内容 -->
        <div class="content">
          <router-view />
        </div>

        <!-- 右侧侧边栏 -->
        <div class="sidebar">
          <section class="sidebar-widget">
            <h3 class="sidebar-title">热门标签</h3>

          </section>

          <section class="sidebar-widget">
            <h3 class="sidebar-title">推荐作者</h3>
            <div v-for="author in authors" :key="author.name" class="author-item">
              <div style="display:flex; align-items:center; margin-bottom:10px">
                <img :src="author.avatar" alt="头像" style="width:40px;height:40px;border-radius:50%;margin-right:10px;">
                <div>
                  <div>{{ author.name }}</div>
                  <div style="font-size:12px;color:#777">{{ author.role }}</div>
                </div>
              </div>
            </div>
          </section>

          <section class="sidebar-widget">
            <h3 class="sidebar-title">本周热门</h3>
          </section>
        </div>
      </div>
    </div>

    <!-- 底部 Footer，全屏宽 -->
    <Footer />
  </div>
</template>

<script setup lang="ts">
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
import { ref } from 'vue'

// 伪数据
const tags = ref(['Java', 'Vue', 'Spring Boot', '数据库', '算法', '前端', '后端', 'Docker', 'Python', 'React'])
const authors = ref([
  { name: '张伟', role: '高级Java工程师', avatar: 'https://via.placeholder.com/40' },
  { name: '李娜', role: '前端架构师', avatar: 'https://via.placeholder.com/40' },
  { name: '王明', role: '全栈开发工程师', avatar: 'https://via.placeholder.com/40' }
])
const hotPosts = ref([
  { id: 1, title: 'Vue 3.0 新特性全面解析' },
  { id: 2, title: 'Java并发编程实战指南' },
  { id: 3, title: 'Spring Boot微服务架构设计' }
])

const rankColor = (index: number) => {
  if(index === 0) return '#fc5531'
  if(index === 1) return '#ff9800'
  if(index === 2) return '#4caf50'
  return '#999'
}
</script>

<style scoped>
/* 主体容器，全屏宽 */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 中间内容区域固定宽度居中 */
.main-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.main-content {
  max-width: 1200px;
  display: flex;
  gap: 20px;
  width: 100%;
}

/* 左侧文章区 */
.content {
  flex: 1;
}

/* 右侧侧边栏 */
.sidebar {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;      /* 吸顶 */
  top: 100px;             /* 离浏览器顶部的距离，可根据Header高度调整 */
  align-self: flex-start; /* 保证在flex布局中不撑满高度 */
}

/* 侧边栏小组件样式 */
.sidebar-widget {
  background:white;
  border-radius:8px;
  padding:15px;
  box-shadow:0 2px 5px rgba(0,0,0,0.05);
}

.sidebar-title {
  font-size:18px;
  margin-bottom:15px;
  border-bottom:1px solid #eee;
  padding-bottom:10px;
}

.tag-list {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.tag {
  background:#f0f2f5;
  padding:5px 10px;
  border-radius:15px;
  font-size:14px;
  color:#555;
  text-decoration:none;
}
.tag:hover { background:#e0e3e8; }
</style>
